<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt"  prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path;
%>
<script type="text/javascript" src="<%=path%>/bootstrap/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/bootstrap/js/jquery-3.4.1.js"></script>
<link href="http://cdn.bootcss.com/twitter-bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/css/datetimepicker.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://www.bootcss.com/p/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		$('.form_date').datetimepicker({
			language:'zh-CN',/*语言 */
			weekStart:1,/*一周从那一天开始*/
			todayBtn:1,/*当天日期将被选中*/
			autoclose:1,/*选择后将自动关闭当前时间控件*/
			todayHighlight:1,
			startView:2,
			minView:2,
			forceParse:0,
			format:"yyyy-mm-dd"
		});
	})
	
	function checkForm() {
		
		var account=document.getElementById("account").value;
		var name=document.getElementById("name").value;
		var date=document.getElementById("date").value;
		var money=document.getElementById("money").value;
		
		if (account=="" || name=="" || date==""|| money=="") {
			document.getElementById("error").innerHTML="信息填写不完整！";
			return false;
		}
		return true;
	}
	
	window.onload = function () {
		//获取当前要修改的学生居住宿舍楼Id
		var yachtId = "${comsume.yId}";
		
		var yachtIdSelect = document.getElementById("yachtId");
		var options = yachtIdSelect.options;
		
		//遍历所有option
		$.each(options,function(i,option){
			$(option).attr("selected",option.value == yachtId);			
		})
	}
	
	$(document).ready(function() {
		$("#comsume").addClass("active");
	});
</script>
<div class="data_list">
	<div class="data_list_title">
		<c:if test="${comsume.id == null}">
			添加消费记录
		</c:if>
		<c:if test="${comsume.id != null}">
			修改消费记录
		</c:if>
	</div>
	<form action="save" method="post" onsubmit="return checkForm()">
		<div class="data_form">
				<div align="center">
					<input type="hidden" id="id" name="id" value="${comsume.id}" />
					<font id="error" color="red"> ${error}</font>
				</div> 	
				<table align="center">
					<tr>
						<td><font color="red">*</font>日期：</td>
						<td><input type="text" id="datetimepicker" name="date" value='<fmt:formatDate value="${comsume.date}" pattern="yyyy-MM-dd"/>' style="margin-top: 5px;height:30px;" placeholder="消费日期" class="controls input-append date form_date" readonly></td>
					</tr>
					<tr>
						<td><font color="red">*</font>会员电话：</td>
						<td><input type="text" id="tel" name="tel" value="${comsume.user.tel}" style="margin-top: 5px;height:30px;"></td>
					</tr>
					<tr>
						<td><font color="red">*</font>游艇名称：</td>
						<td>
							<select id="yachtId" name="yachtId" style="width: 90px;">
								<c:forEach items="${yachts}" var="yacht">
									<option value="${yacht.id }">${yacht.name }</option>
								</c:forEach>
							</select>
						</td>
					</tr>
					<tr>
						<td><font color="red">*</font>消费金额：</td>
						<td><input type="text" id="money" name="money" value="${comsume.money}" style="margin-top: 5px;height:30px;"></td>
					</tr>
				</table>	
				<div align="center">
					<input type="submit" class="btn btn-primary" value="保存">
					&nbsp;<button class="btn btn-primary" type="button" onclick="javascript:history.back()">返回</button>
				</div>
		</div>
	</form>
</div>